<script setup lang="ts">
import { CountUp } from 'countup.js'
import { onMounted, ref } from 'vue'

const props = defineProps<{
  amount: string
  title: string
  tips: string
  subtitle: string
  number1: number
  number2: number
}>()

const num1Ref = ref<HTMLElement>()
const num2Ref = ref<HTMLElement>()
onMounted(() => {
  const countUp1 = new CountUp(num1Ref.value!, props.number1, {
    prefix: props.amount === 'saleroom' ? '￥' : ''
  })
  countUp1.start()

  const countUp2 = new CountUp(num2Ref.value!, props.number1, {
    prefix: props.amount === 'saleroom' ? '￥' : ''
  })
  countUp2.start()
})
</script>

<template>
  <div class="statistical">
    <div class="header">
      <span>{{ title }}</span>
      <el-tooltip effect="light" :content="tips" placement="top">
        <el-icon><Warning /></el-icon>
      </el-tooltip>
    </div>
    <div class="content">
      <span class="num1" ref="num1Ref">{{ number1 }}</span>
    </div>
    <div class="footer">
      <span class="text">{{ subtitle }}</span>
      <span class="num2" ref="num2Ref">{{ number2 }}</span>
    </div>
  </div>
</template>

<style lang="less" scoped>
.statistical {
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  background-color: #fff;
  height: 130px;
}
.header {
  display: flex;
  height: 38px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
.content {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  font-size: 26px;
}
.footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: rgba(0, 0, 0, 0.85);
  height: 38px;
  font-size: 14px;
  letter-spacing: 1px;
  border-top: 1px solid #f0f0f0;
  .num2 {
    margin-left: 5px;
  }
}
</style>
